<!--suppress ALL -->
<template>
  <div id="app">
    <el-row :gutter="20">
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="serach">
            <el-input placeholder="请输入内容" v-model="novelName" @keyup.enter.native="queryNovel">{{novelName}}</el-input>
          </div>
          <showNovelTableComponent :tableData="novelNameList"
                                   v-bind:context="context"
                                   v-bind:novelTitle="novelTitle"
                                   @changeContext="changeContext"></showNovelTableComponent>
        </div>
      </el-col>
      <el-col :span="16">
        <div class="grid-content bg-purple">
          <h1 class="article-title">{{novelTitle}}</h1>
          <article class="article-content">{{context}}</article>
          <center>
            <pageComponent v-bind:context="context" @changeContext="changeContext"></pageComponent>
          </center>
        </div>
      </el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <div class="upload">
            <uploadNovelComponent/>
          </div>
            <ol>
              <li v-for="(chapter, index) in chapters" @click="selectChapter(index)" ref="chapterName">
                <!--type="primary"-->
                <el-button  size="mini" round>{{chapter.chapterName}}</el-button>
              </li>
            </ol>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import showNovelTableComponent from './components/showNovelTableComponent.vue'
  import pageComponent from './components/pageComponent.vue'
  import chapterComponent from './components/chapterComponent.vue'
  import uploadNovelComponent from './components/uploadNovelComponent.vue'
  import axios from 'axios'

  export default {
    name: 'app',
    data() {
      return {
        novelName: "",
        novelNameList: [{}],
        novelTitle: "",
        context: "",
        chapters: "",
        type: "",
        chapterName: ""
      }
    },
    components: {showNovelTableComponent, pageComponent, chapterComponent, uploadNovelComponent},
    methods: {
      queryNovel() {
        var _this = this
        axios.get('http://localhost:8081/findByNovelName?novelName=' + _this.novelName)
          .then(function (response) {
            var data = response.data;
            _this.novelName = "";
            _this.novelNameList = data;
          }).catch(function (response) {
          console.log(response);
        });
      },
      changeContext(contextData, novelTitleData, data, allNovel) {
        this.context = contextData;
        if (typeof novelTitleData != "undefined" && novelTitleData != null && novelTitleData != "") {
          this.novelTitle = novelTitleData;
        }
        if (typeof data != "undefined" && data != null && data != "") {
          this.chapters = data[0].chapters;
        }
        this.novelNameList = allNovel;
      },
      selectChapter(index){
        var chapter = this.$refs.chapterName[index].innerText;
        var novelName = window.localStorage.getItem("novelName");
        var _this = this;
        axios.get('http://localhost:8081/findByChapterName?novelName=' + novelName + '&chapterName=' + chapter)
          .then(function (response) {
            var data = response.data;
            _this.context = data.chapterContext;
          }).catch(function (response) {
          console.log(response);
        });
      }
    }
  }
</script>

<style>

  li{
    list-style:none;
    display: inline-block;
    margin-left: 10px;
    margin-top: 10px;
  }

  ol{
    margin-left: -49px;
  }

  .upload {
    margin-top: 40px;
    margin-bottom: 10px;
  }

  .article-content {
    font-size: 18px;
    line-height: 26px;
    word-break: break-all;
    word-wrap: break-word;
    position: relative;
    padding: 10px 20px 20px 20px;
    background-color: #fff;
    letter-spacing: 6px;
    text-align: justify;
    word-wrap: break-word;
    word-break: break-all;
    font: 22px "Microsoft YaHei", Helvetica, Arial, Lucida Grande, Tahoma, sans-serif;
    color: #444;
  }

  .article-title {
    padding: 5px 0;
    text-align: center;
    margin: 5px 0;
    line-height: 35px;
  }

  .el-row {
    margin-bottom: 20px;

  &
  :last-child {
    margin-bottom: 0;
  }

  }
  .el-col {
    border-radius: 4px;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>
